<template>
	<view class="login__container">
		<uniStatusBar bgColor="#FFE933"></uniStatusBar>
		<image src="../../static/login/loginImg.png" mode="widthFix" />
		<text class="login__container--back icon iconfont icon-tianjia1" @tap="back"></text>
		<!-- 切换 -->
		<!-- 密码登录 -->
		<template v-if="isUsernameLogin">
			<view class="login__container__body animate__animated animate__bounceInRight">
				<input class="user__set__input" type="email" placeholder="昵称/手机号/邮箱" v-model="username" />
				<view class="login__container__body--password u-f-ac">
					<input class="user__set__input" type="email" placeholder="请输入密码" password v-model="password" />
					<text>忘记密码?</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="login__container__body animate__animated animate__bounceInRight">
				<view class="login__container__body__area u-f-ac">
					<text>+86</text>
					<input class="user__set__input" type="tel" placeholder="输入手机号码" v-model="phone" inputmode="tel" />
				</view>
				<view class="login__container__body--code u-f-ac">
					<input class="user__set__input" type="tel" placeholder="请输入验证码" v-model="code" inputmode="numeric" />
					<text  @tap="getCode">{{!codeTime?'获取验证码':+codeTime+'s后可以再次发送'}}</text>
				</view>
			</view>
		</template>
		<!-- 登录按钮 -->
		<button type="default" class="user__set__btn" :loading="isloading"
			:class="[{'user__set__btn--disable':isEnabled}]" @tap="submitLogin">登录</button>
		<!-- 切换登录 -->
		<view class="login__container--switch u-f-ac u-f-juc" @tap="switchLogin">
			<text>{{isUsernameLogin?'验证码登录':'用户名登录'}}</text>
			<text class="icon iconfont icon-arrow-down-s-line"></text>
		</view>
		<!--  -->
		<text class="login__container--line  u-f-ac u-f-juc">第三方登录</text>
		<!-- 第三方 -->
		<thirdPartyLogin />
		<!-- 协议 -->
		<view class="login__container__agreement u-f-ac u-f-juc">
			<text>注册即代表您同意</text>
			<text>《百科用户协议》</text>
		</view>

	</view>
</template>

<script setup>
	import uniStatusBar from '../../component/uni-nav-bar/uni-status-bar.vue';
	import thirdPartyLogin from '../../component/common/third-party-login.vue';
	import {login,getUserInfo,loginByPhone,getCodeApi} from '../../api/user.js';
	import user from '../../common/user.js';
	import {
		ref,
		computed
	} from 'vue';
	import {check} from '../../common/verification.js';

	const isloading = ref(false);
	// 登录按钮是否可以点击
	const isEnabled = computed(() => {
		if(isUsernameLogin.value){
			return username.value != '' && password.value != '';
		}
		return phone.value!=""&&code.value!="";
	});

	const username = ref("");
	const password = ref("");
	// 是否是用户名登录
	const isUsernameLogin = ref(true)

	// 手机号登录
	const phone = ref("");
	const code = ref("");
	// 获取验证码
	const codeTime = ref(false)

	// 获取验证码
	function getCode(){
		
		if(codeTime.value||!check(phone.value,/^1[3-9][0-9]{9}$/,"手机号格式不正确"))return;
		getCodeApi(phone.value).then(res=>{
			uni.showToast({
				title:res.msg,
			})
		}).finally(()=>{
			codeTime.value = 60
			const t= setInterval(()=>{
				codeTime.value--;
				 if(codeTime.value<=0){
					 codeTime.value=false;
					 clearInterval(t)
				 }
			},1000)
		})
		
	}

	// 返回上一个页面
	function back(){
		uni.navigateBack(1)
	}

	// 提交登录
	async function submitLogin() {
		if (isloading.value || isEnabled.value == false) return;
		console.log(phone.value)
		if(isUsernameLogin.value){
			if(check(username.value,/^\w{4,16}$/,"用户名必须在{4,16}")
			&&check(password.value,/^\w{4,16}$/,"密码必须在{4,16}")){
				isloading.value = true;
				const res = await login(username.value,password.value).finally(()=>{
					isloading.value = false;
				})
				setToken(res)
			}
		}else {
			if(check(phone.value,/^1[3-9][0-9]{9}$/,"手机号格式不正确")){
				isloading.value = true;
				const res = await loginByPhone(phone.value,code.value).finally(()=>{
					isloading.value = false;
				})
				setToken(res)
			}
		}

	}
	
	// 设置token
	function setToken(data){
		user.token = data.token;
		user.access_token = data.access_token;
		uni.navigateBack()// 回退
		// 获取用户信息
		getUserInfo().then(res=>{
			user.userinfo = res;
			console.log(res);
		})
	}
	
	

	

	// 切换登录
	function switchLogin() {
		isUsernameLogin.value = !isUsernameLogin.value;
	}
</script>

<style scoped lang="scss">
	@import '../../common/from.scss';

	.login__container {
		position: relative;

		>image {
			width: 100%;
			display: block;
			margin-top: -2upx;
		}

		&--back {
			position: absolute;
			top: 100upx;
			left: 40upx;
			width: 50upx;
			height: 50upx;
			font-size: 50upx;
			transform: rotate(45deg);
			font-weight: bold;

		}

		&--switch {
			margin: 40upx 0;
			overflow: hidden;

			>text:first-of-type {
				font-size: 28upx;
				font-family: "宋体";
				color: #4e4e4e;
			}

			>text:last-of-type {
				transform: rotate(-90deg);
				color: #ccc;
				font-size: 50upx;
			}
		}

		&--line {
			position: relative;
			color: #ccc;
			margin: 20upx 0;
			font-size: 26upx;

			&::after,
			&::before {
				content: "";
				width: 100upx;
				height: 2upx;
				background-color: #ccc;
				margin: 0 20upx;
			}
		}

		&__agreement {
			margin: 20upx 0;
			font-size: 24upx;
			color: #ccc;

			>text {
				&:first-of-type {}

				&:last-of-type {
					color: #3bb4fc;
				}
			}
		}

		&__body {
			padding: 40upx;

			>input {}

			&--password {
				position: relative;

				>text {
					font-size: 28upx;
					margin-left: 10upx;
				}

				>input {
					flex: 1;

				}
			}

			&__area {
				>text {
					font-weight: bold;
					margin-right: 20upx;
				}

				>input {
					flex: 1;
				}
			}

			&--code {
				>text {
					margin-left: 20upx;
					color: #9d9d9d;
					padding: 16upx 13upx;
					font-size: 24upx;
					background-color: #f4f4f4;
					border-radius: 6upx;
				}

				>input {
					flex: 1;
				}
			}
		}
	}
</style>